import 'package:flutter/material.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
import '../tabs/data.dart'; // Import the data file

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  String selectedCategory = 'follow';
  List<Map<String, dynamic>> listData = followData;

  void updateCategory(String category) {
    setState(() {
      selectedCategory = category;
      if (category == 'follow') {
        listData = followData;
      } else if (category == 'popular') {
        listData = popularData;
      } else if (category == 'fandom') {
        listData = fandomrData;
      } else if (category == 'niebao') {
        listData = niebaoData;
      } else if (category == 'original') {
        listData = originalData;
      } else if (category == 'trip') {
        listData = tripData;
      } 
      // Add other categories here...
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        automaticallyImplyLeading: false,
        title: Row(
          children: [
            TextButton(
              style: TextButton.styleFrom(
                tapTargetSize: MaterialTapTargetSize.shrinkWrap,
              ),
              onPressed: () {},
              child: const Text(
                '社区',
                style: TextStyle(
                  color: Colors.black,
                ),
              ),
            ),
            TextButton(
              style: TextButton.styleFrom(
                tapTargetSize: MaterialTapTargetSize.shrinkWrap,
              ),
              onPressed: () {},
              child: const Text(
                '奇遇',
                style: TextStyle(
                  color: Colors.black,
                ),
              ),
            ),
            TextButton(
              style: TextButton.styleFrom(
                tapTargetSize: MaterialTapTargetSize.shrinkWrap,
              ),
              onPressed: () {
                Navigator.pushNamed(context, '/link');
              },
              child: const Text(
                '排行榜',
                style: TextStyle(
                  color: Colors.black,
                ),
              ),
            ),
          ],
        ),
        actions: [
          IconButton(
            icon: const Icon(Icons.search),
            onPressed: () {
              Navigator.pushNamed(context, '/search');
            },
          ),
          IconButton(
            icon: const Icon(Icons.notifications),
            onPressed: () {},
          ),
        ],
      ),
      body: Column(
        children: [
          Row(
            children: [
              SizedBox(width: 13),
              ElevatedButton(
                onPressed: () {
                  // Navigator.pushNamed(context, '/guan');
                },
                style: ElevatedButton.styleFrom(
                  backgroundColor: Color.fromARGB(255, 251, 216, 192),
                  padding: EdgeInsets.symmetric(horizontal: 9, vertical: 20),
                  shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(8)),
                ),
                child: Row(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    Column(
                      children: [
                        Text(
                          '捏图',
                          style: TextStyle(
                              color: Color.fromARGB(255, 187, 87, 20),
                              fontSize: 25,
                              fontWeight: FontWeight.bold),
                        ),
                        Text(
                          '603人正在捏',
                          style: TextStyle(
                            color: Color.fromARGB(255, 187, 87, 20),
                          ),
                        ),
                      ],
                    ),
                    SizedBox(width: 15),
                    Image.asset('lib/assets/book.png', width: 50, height: 50),
                    SizedBox(width: 8),
                  ],
                ),
              ),
              SizedBox(width: 10),
              ElevatedButton(
                onPressed: () {
                  Navigator.pushNamed(context, '/guan');
                },
                style: ElevatedButton.styleFrom(
                  backgroundColor: Colors.blue.shade200,
                  padding: EdgeInsets.symmetric(horizontal: 1, vertical: 20),
                  shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(8)),
                ),
                child: Row(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    Column(
                      children: [
                        Row(
                          children: [
                            SizedBox(width: 6),
                            Text(
                              '开始奇遇',
                              style: TextStyle(
                                  color: Colors.blue.shade700,
                                  fontSize: 25,
                                  fontWeight: FontWeight.bold),
                            ),
                          ],
                        ),
                        Text(
                          '带角色去旅行',
                          style: TextStyle(color: Colors.blue.shade700),
                        ),
                      ],
                    ),
                    SizedBox(width: 15),
                    Image.asset('lib/assets/plane.png', width: 50, height: 50),
                    SizedBox(width: 8),
                  ],
                ),
              )
            ],
          ),
          Container(
            height: 48.0,
            child: ListView(
              scrollDirection: Axis.horizontal,
              children: [
                _buildCategoryButton('关注', 'follow'),
                _buildCategoryButton('热门', 'popular'),
                _buildCategoryButton('同人圈', 'fandom'),
                _buildCategoryButton('捏宝', 'niebao'),
                _buildCategoryButton('原创', 'original'),
                _buildCategoryButton('奇旅团', 'trip'),
              ],
            ),
          ),
          Expanded(
            child: SafeArea(
              child: Container(
                color: const Color(0xffF7F7F7),
                padding: const EdgeInsets.all(8.0),
                child: MasonryGridView.builder(
                  gridDelegate:
                      const SliverSimpleGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: 2,
                  ),
                  itemCount: listData.length,
                  itemBuilder: (BuildContext context, int index) {
                    return _createGridViewItem(listData[index]);
                  },
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildCategoryButton(String title, String category) {
    return InkWell(
      onTap: () => updateCategory(category),
      onHover: (isHovering) {
        setState(() {});
      },
      child: Container(
        decoration: BoxDecoration(
          gradient: selectedCategory == category
              ? const LinearGradient(
                  colors: [Colors.lightBlue, Colors.pinkAccent])
              : null,
          color: selectedCategory == category ? null : Colors.transparent,
        ),
        padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
        child: Text(
          title,
          style: TextStyle(
            color: selectedCategory == category
                ? Colors.white
                : Colors.black,
            fontWeight: FontWeight.bold,
          ),
        ),
      ),
    );
  }

  Widget _createGridViewItem(Map<String, dynamic> data) {
    double aspectRatio = data['width'] / data['height'];
    return GestureDetector(
      onTap: () {
        Navigator.pushNamed(context, '/xiangqing');
      },
      child: Container(
        margin: const EdgeInsets.all(4.0),
        color: Colors.white,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            AspectRatio(
              aspectRatio: aspectRatio,
              child: Image.asset(
                data['img'],
                fit: BoxFit.cover,
              ),
            ),
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    data['desc'],
                    maxLines: 2,
                    overflow: TextOverflow.ellipsis,
                    style: const TextStyle(
                      fontSize: 14,
                      fontWeight: FontWeight.bold,
                      color: Color(0xff434343),
                      letterSpacing: 0.8,
                    ),
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Row(
                        children: [
                          _imageRound(data['ava_tar'], 25),
                          const SizedBox(width: 10),
                          Text(
                            data['name'],
                            style: const TextStyle(
                              fontSize: 12,
                              color: Color(0xffC5C5C5),
                            ),
                          ),
                        ],
                      ),
                      Row(
                        children: [
                          const Icon(
                            Icons.favorite,
                            color: Color(0xffD7433F),
                            size: 20,
                          ),
                          const SizedBox(width: 10),
                          Text(
                            data['like'].toString(),
                            style: const TextStyle(
                              color: Color(0xffC9C9C9),
                              fontSize: 12,
                            ),
                          ),
                        ],
                      ),
                    ],
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _imageRound(String url, double size) {
    return ClipOval(
      child: Image.asset(
        url,
        width: size,
        height: size,
        fit: BoxFit.cover,
      ),
    );
  }
}
